
import { createSvg, svgns, xlinkns } from './svg.js'
import { renderShape } from './renderShape.js'
import { _append } from '../ui/dom.js'
import { layoutPoints } from '../math/points/gridPoints.js'

// svg包围
export const _svg = (options) => {
  let {
    width,
    height,
    shapes = [],
    pattern = [],
    props,
    axis,
    grid,
    polar,
    layout
  } = options
  let svg = createSvg('svg', {
    width,
    height,
    xmlns: svgns,
    'xmlns:xlink': xlinkns
    // viewBox: `0,0,${width},${height}`,
    // preserveAspectRatio: "XMidYMid meet"
  })

  const fn = (t) => {
    if (!t) return
    let svgDom = renderShape(t, {
      ...props,
      ...t.props
    })
    _append(svg, svgDom)
  }

  const axisMap = {
    axis, grid, polar
  }
  Object.keys(axisMap).forEach(t => {
    axisMap[t] && fn({
      shape: t,
      ...axisMap[t]
    })
  })


  pattern.forEach(t => fn(t))

  let len = shapes.length
  if (layout) {
    let lps = layoutPoints(layout)
    lps.forEach((t, i) => fn({
      shape: 'circle',
      o: t,
      ...shapes[len === 1 ? 0 : (i % len)]
    }))
  } else {
    shapes.forEach(t => fn(t))
  }
  return svg
}
